<template>
    <div class="singer-wrap" ref="singerWrapper">
        <scroll ref="scroll" :data="singerList" :listenScroll="listenScroll" :probeType="probeType" @scroll="scroll">
            <ul class="singer-list">
                <li v-for="(item, index) of singerList" :key="index" class="list-item" ref="listGroup">
                    <p class="title" :ref="item.title">{{item.title}}</p>
                    <ul class="singer">
                        <li class="item-singer" v-for="singer in item.items" :key="singer.name" @click="getSinnerDetail(singer)">
                            <img class="avatar" v-lazy="singer.img1v1Url" alt="">  
                            <p class="name">{{singer.name}}</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </scroll>
        <ul class="menu-wrapper">
            <li class="item-menu" :class="{'active':currentIndex === index}" v-for="(item,index) in menu" :key="item" @click.stop="handleScroll">{{item}}</li>
        </ul>
        <transition name="van-slide-right">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import Scroll from 'components/scroll/scroll'
import { getSinger } from 'api/api'
import { playerMixin } from 'common/js/mixin'
const pinyin = require('pinyin')

export default {
    name:'',
    mixins: [playerMixin],
    data(){
        return {
            probeType: 3,
            listenScroll: true,
            singerList: [],
            menu: [],
            currentIndex: 0
        }
    },
    mounted() {
        this._getSinger()
    },
    methods: {
        _getSinger(){
            getSinger().then(res=> {
                this.singers = res.artists.map(item=> {
                    let py = pinyin(item.name[0], {
                        style: pinyin.STYLE_FIRST_LETTER
                    })
                    item.py = py[0][0].toUpperCase()
                    return item
                })
                this.singerList = this.singerFormat(this.singers)
                setTimeout(()=> {
                    this._calculateHeight()
                },20)
            })
        },
        singerFormat(singers){
            let hot = {
                title: '热',
                items: singers.slice(0,15)
            }
            let serialize = {}
            singers.forEach(item => {
                if(!serialize[item.py]){
                    serialize[item.py] = {
                        title: item.py,
                        items: []
                    }
                }
                if(item.py === serialize[item.py].title) {
                    serialize[item.py].items.push(item)
                }
            })
            let serializeList = []
            for(let item in serialize) {
                serializeList.push(serialize[item])
            }
            serializeList = serializeList.sort((a, b)=> {
                return a.title.charCodeAt(0) - b.title.charCodeAt(0)
            })
            serializeList.unshift(hot)
            this.menu = serializeList.map(item=> item.title)
            return serializeList
        },
        handleScroll(e) {
            let text = e.target.innerText
            let el = this.$refs[text][0]
            this.$refs.scroll.scrollToElement(el)
        },
        getSinnerDetail(singer) {
            let params = {
                id: singer.id,
                cover: singer.img1v1Url,
                name: singer.name
            }
            this.$router.push({path:'/singer/singer-detail',query:params})
        },
        scroll(pos) {
            const heightList = this.heightList
            if(pos.y > 0){
                this.currentIndex = 0
                return
            }
            for(let i = 0; i < heightList.length; i++) {
                if(-pos.y < heightList[i + 1] && -pos.y >= heightList[i]) {
                    this.currentIndex = i
                    return
                }
            }
        },
        _calculateHeight() {
            this.heightList = []
            let height = 0
            this.heightList.push(height)
            let listGroup = this.$refs.listGroup
            for(let i = 0; i < listGroup.length; i++) {
                let item = listGroup[i]
                height += item.clientHeight
                this.heightList.push(height)
            }
        },
        refresh() {
            this.$refs.scroll.refresh()
        },
        handlePlaylist(list) {
            if(list.length) {
                this.$refs.singerWrapper.style.bottom = `60px`             
            }else{
                this.$refs.singerWrapper.style.bottom = `0px`
            }
            this.refresh()
        }
    },
    components: {
        Scroll
    }
}
</script>

<style scoped lang="less">
    .singer-wrap{
        overflow: hidden;
        position: fixed;
        top: 76px;
        bottom: 0;
        width: 100%;
        .title{
            padding:5px  0 5px 20px;
            margin-bottom: 20px;
            background: #ededed;
        }
        .singer{
            padding: 0 20px;
            .item-singer{
                display: flex;
                align-items: center;
                padding-bottom: 20px;
                .avatar{
                    width: 70px;
                    height: 70px;
                    border-radius: 50%;
                }
                .name{
                    flex: 1;
                    margin-left: 20px;
                    color: #888;
                }
            }
        }
        .menu-wrapper{
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translate3d(0,-50%,0);
            display: flex;
            flex-direction: column;
            align-items: center;
            .item-menu{
                width: 18px;
                height: 18px;
                line-height: 18px;
                padding: 1px;
                text-align: center;
                border-radius:50%;
                font-size: 12px;
                &.active{
                    color: #d43c33;
                }
            }
        }
    }


</style>
